<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单 - 泡泡玛特</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        :root {
            --primary: #8a2be2;
            --secondary: #ff6ec7;
            --accent: #00c8ff;
            --light: #f9f5ff;
            --dark: #2a0a4a;
            --success: #52c41a;
            --warning: #faad14;
            --error: #f5222d;
        }

        body {
            background-color: #f8f7fc;
            color: #333;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            flex: 1;
        }

        /* 头部导航 */
        header {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            box-shadow: 0 4px 12px rgba(138, 43, 226, 0.2);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }

        .logo {
            display: flex;
            align-items: center;
            color: white;
            text-decoration: none;
            font-size: 24px;
            font-weight: 800;
        }

        .logo i {
            margin-right: 10px;
            font-size: 28px;
        }

        .nav-icons {
            display: flex;
            gap: 20px;
        }

        .nav-icon {
            color: white;
            font-size: 22px;
            position: relative;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .nav-icon-text {
            font-size: 16px;
            font-weight: 500;
        }

        .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background: var(--accent);
            color: white;
            font-size: 12px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        /* 主菜单 */
        .main-nav {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
        }

        .main-nav ul {
            display: flex;
            list-style: none;
            padding: 12px 0;
            overflow-x: auto;
            white-space: nowrap;
        }

        .main-nav li {
            margin-right: 30px;
        }

        .main-nav a {
            color: white;
            text-decoration: none;
            font-weight: 600;
            font-size: 16px;
            padding: 8px 0;
            position: relative;
        }

        .main-nav a:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent);
            transition: width 0.3s;
        }

        .main-nav a:hover:after {
            width: 100%;
        }

        /* 订单列表 */
        .order-list {
            margin: 40px 0;
        }

        .page-title {
            font-size: 28px;
            margin-bottom: 30px;
            color: var(--dark);
            position: relative;
            padding-bottom: 15px;
        }

        .page-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 80px;
            height: 3px;
            background: var(--accent);
        }

        .order-card {
            background: white;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .order-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        .order-header {
            display: flex;
            justify-content: space-between;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
            margin-bottom: 15px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .order-id {
            font-weight: 700;
            color: var(--primary);
        }

        .order-date {
            color: #666;
            font-size: 14px;
        }

        .order-status {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
        }

        .status-pending {
            background: #ffec3d;
            color: #000;
        }

        .status-paid {
            background: #1890ff;
            color: white;
        }

        .status-shipped {
            background: #722ed1;
            color: white;
        }

        .status-completed {
            background: var(--success);
            color: white;
        }

        .status-cancelled {
            background: var(--error);
            color: white;
        }

        .order-content {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }

        .order-products {
            flex: 1;
            min-width: 300px;
        }

        .product-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 10px 0;
        }

        .product-image {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: 24px;
        }

        .product-info {
            flex: 1;
        }

        .product-name {
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--dark);
        }

        .product-price {
            color: var(--primary);
            font-weight: 600;
        }

        .order-summary {
            width: 250px;
            text-align: right;
        }

        .order-price {
            font-size: 22px;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 10px;
        }

        .order-quantity {
            color: #666;
        }

        .order-action {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }

        .btn-action {
            padding: 8px 16px;
            border: 1px solid #ddd;
            border-radius: 20px;
            background: white;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
        }

        .btn-action:hover {
            background: #f5f5f5;
        }

        .btn-pay {
            background: var(--primary);
            color: white;
            border: none;
        }

        .btn-pay:hover {
            background: #7a1fd1;
        }

        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        .empty-icon {
            font-size: 80px;
            color: #e0e0e0;
            margin-bottom: 20px;
        }

        .empty-title {
            font-size: 24px;
            color: #666;
            margin-bottom: 15px;
        }

        .empty-desc {
            color: #999;
            margin-bottom: 30px;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }

        .btn-shopping {
            display: inline-block;
            padding: 12px 32px;
            background: var(--primary);
            color: white;
            text-decoration: none;
            font-weight: 600;
            border-radius: 30px;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(138, 43, 226, 0.4);
        }

        .btn-shopping:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(138, 43, 226, 0.6);
        }

        /* 加载动画 */
        .loader {
            display: flex;
            justify-content: center;
            padding: 40px 0;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid rgba(138, 43, 226, 0.2);
            border-top: 5px solid var(--primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 错误状态 */
        .error-state {
            text-align: center;
            padding: 40px 20px;
            background: #fff2f0;
            border-radius: 16px;
            border: 1px solid #ffccc7;
        }

        .error-icon {
            font-size: 50px;
            color: var(--error);
            margin-bottom: 20px;
        }

        .error-title {
            font-size: 20px;
            color: var(--error);
            margin-bottom: 15px;
        }

        /* 页脚 */
        footer {
            background: var(--dark);
            color: white;
            padding: 60px 0 30px;
            margin-top: 60px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }

        .footer-column h3 {
            font-size: 20px;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }

        .footer-column h3:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 3px;
            background: var(--accent);
        }

        .footer-column ul {
            list-style: none;
        }

        .footer-column ul li {
            margin-bottom: 12px;
        }

        .footer-column a {
            color: #ccc;
            text-decoration: none;
            transition: all 0.3s;
        }

        .footer-column a:hover {
            color: var(--accent);
            padding-left: 5px;
        }

        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            font-size: 18px;
            transition: all 0.3s;
        }

        .social-links a:hover {
            background: var(--accent);
            transform: translateY(-5px);
        }

        .copyright {
            text-align: center;
            padding-top: 30px;
            margin-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #aaa;
            font-size: 14px;
        }

        /* 响应式设计 */
        @media (max-width: 900px) {
            .footer-content {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .header-top {
                flex-direction: column;
                gap: 15px;
            }

            .main-nav ul {
                padding-bottom: 5px;
            }

            .nav-icon-text {
                display: none;
            }

            .order-content {
                flex-direction: column;
            }

            .order-summary {
                width: 100%;
                text-align: left;
            }

            .order-action {
                justify-content: center;
            }
        }

        @media (max-width: 480px) {
            .footer-content {
                grid-template-columns: 1fr;
            }

            .order-header {
                flex-direction: column;
                align-items: flex-start;
            }
        }
    </style>
</head>
<body>
<!-- 顶部导航 -->
<header>
    <div class="container">
        <div class="header-top">
            <a href="index.html" class="logo">
                <i class="fas fa-gem"></i>
                POP MART
            </a>

            <div class="nav-icons">
                <div class="nav-icon" id="userIcon">
                    <i class="fas fa-user"></i>
                    <span class="nav-icon-text" id="loginText">登录</span>
                </div>
                <div class="nav-icon">
                    <i class="fas fa-heart"></i>
                    <span class="nav-icon-text">收藏</span>
                </div>
                <div class="nav-icon">
                    <i class="fas fa-shopping-cart"></i>
                    <span class="cart-count" id="cartCount">0</span>
                    <span class="nav-icon-text">购物车</span>
                </div>
            </div>
        </div>

        <nav class="main-nav">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="#">热门分类</a></li>
                <li><a href="#">新品上市</a></li>
                <li><a href="#">热门系列</a></li>
                <li><a href="#">盲盒专区</a></li>
                <li><a href="#">艺术家</a></li>
                <li><a href="#">限定商品</a></li>
                <li><a href="#">促销活动</a></li>
                <li><a href="order.html">我的订单</a></li>
                <li><a href="#">会员中心</a></li>
            </ul>
        </nav>
    </div>
</header>

<!-- 订单列表主体 -->
<div class="container">
    <div class="order-list">
        <h2 class="page-title">我的订单</h2>

        <div id="ordersContainer">
            <div class="loader">
                <div class="spinner"></div>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer>
    <div class="container">
        <div class="footer-content">
            <div class="footer-column">
                <h3>关于我们</h3>
                <ul>
                    <li><a href="#">品牌故事</a></li>
                    <li><a href="#">企业文化</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">加入我们</a></li>
                    <li><a href="#">门店查询</a></li>
                </ul>
            </div>

            <div class="footer-column">
                <h3>客户服务</h3>
                <ul>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">配送说明</a></li>
                    <li><a href="#">退换政策</a></li>
                    <li><a href="#">会员制度</a></li>
                    <li><a href="#">防伪查询</a></li>
                </ul>
            </div>

            <div class="footer-column">
                <h3>商务合作</h3>
                <ul>
                    <li><a href="#">IP合作</a></li>
                    <li><a href="#">渠道合作</a></li>
                    <li><a href="#">媒体合作</a></li>
                    <li><a href="#">企业采购</a></li>
                    <li><a href="#">展会活动</a></li>
                </ul>
            </div>

            <div class="footer-column">
                <h3>关注我们</h3>
                <p>获取最新潮玩资讯和独家优惠</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-qq"></i></a>
                    <a href="#"><i class="fab fa-douban"></i></a>
                    <a href="#"><i class="fab fa-tiktok"></i></a>
                </div>
            </div>
        </div>

        <div class="copyright">
            <p>© 2023 POP MART 泡泡玛特 版权所有 | 潮流玩具购物平台</p>
            <p>京ICP备12345678号 | 客服电话：400-123-4567</p>
        </div>
    </div>
</footer>

<script>
    document.addEventListener('DOMContentLoaded', async function() {
        // 获取用户信息
        const savedUser = localStorage.getItem('popmartUser');
        let userId = null;

        if (savedUser) {
            const user = JSON.parse(savedUser);
            userId = user.uId;

            // 更新登录状态显示
            document.getElementById('loginText').textContent = user.uName;
        } else {
            // 未登录则跳转到登录页
            window.location.href = 'login.html';
            return;
        }

        // 获取订单数据
        try {
            const response = await fetch(`/order/user/${userId}`);
            if (!response.ok) {
                throw new Error('获取订单失败');
            }

            const orders = await response.json();
            const ordersContainer = document.getElementById('ordersContainer');

            if (orders.length === 0) {
                ordersContainer.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-icon">
                            <i class="fas fa-box-open"></i>
                        </div>
                        <h3 class="empty-title">您还没有任何订单</h3>
                        <p class="empty-desc">快去挑选心仪的潮玩商品吧，泡泡玛特为您提供最优质的购物体验</p>
                        <a href="index.html" class="btn-shopping">去购物</a>
                    </div>
                `;
                return;
            }

            // 清空加载动画
            ordersContainer.innerHTML = '';

            // 格式化日期
            function formatDate(dateString) {
                const date = new Date(dateString);
                return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
            }

            // 状态映射
            const statusMap = {
                0: {text: '待付款', class: 'status-pending'},
                1: {text: '已付款', class: 'status-paid'},
                2: {text: '已发货', class: 'status-shipped'},
                3: {text: '已完成', class: 'status-completed'},
                4: {text: '已取消', class: 'status-cancelled'}
            };

            // 渲染订单列表
            orders.forEach(order => {
                const statusInfo = statusMap[order.oStatus] || {text: '未知状态', class: ''};

                const orderCard = document.createElement('div');
                orderCard.classList.add('order-card');

                orderCard.innerHTML = `
                    <div class="order-header">
                        <div>
                            <span class="order-id">订单号: ${order.oId}</span>
                            <span class="order-date">下单时间: ${formatDate(order.oTime)}</span>
                        </div>
                        <span class="order-status ${statusInfo.class}">${statusInfo.text}</span>
                    </div>
                    <div class="order-content">
                        <div class="order-products">
                            <div class="product-item">
                                <div class="product-image">
                                    <i class="fas fa-box"></i>
                                </div>
                                <div class="product-info">
                                    <div class="product-name">${order.gName || '商品名称'}</div>
                                    <div class="product-price">¥${order.gPrice || 0}</div>
                                </div>
                            </div>
                        </div>
                        <div class="order-summary">
                            <div class="order-price">¥${order.oPrice.toFixed(2)}</div>
                            <div class="order-quantity">共${order.oNum}件商品</div>
                        </div>
                    </div>
                    <div class="order-action">
                        <button class="btn-action">查看详情</button>
                        ${order.oStatus === 0 ? '<button class="btn-action btn-pay">去支付</button>' : ''}
                    </div>
                `;

                ordersContainer.appendChild(orderCard);
            });

        } catch (error) {
            console.error('获取订单失败:', error);
            document.getElementById('ordersContainer').innerHTML = `
                <div class="error-state">
                    <div class="error-icon">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                    <h3 class="error-title">加载订单失败</h3>
                    <p>${error.message || '请检查网络连接后重试'}</p>
                    <button class="btn-action" style="margin-top: 20px;" onclick="location.reload()">重新加载</button>
                </div>
            `;
        }
    });
</script>
</body>
</html>